<template>
    <div class="footer">
        <div class="footerA">
            <ul>
                <li>预约维修服务</li>
                <li>7天无理由退货</li>
                <li>15天免费换货</li>
                <li>满69元包邮</li>
                <li>1100余家售后网点</li>
            </ul>
        </div>
        <div class="footerB">
            <ul>
                <p>选购指南</p>
                <li>手机</li>
                <li>电视</li>
                <li>笔记本</li>
                <li>平板</li>
                <li>穿戴</li>
                <li>耳机</li>
                <li>家电</li>
                <li>路由器</li>
                <li>音箱</li>
                <li>配件</li>
            </ul>
            <ul>
                <p>服务中心</p>
                <li>申请售后</li>
                <li>售后政策</li>
                <li>维修服务价格</li>
                <li>订单查询</li>
                <li>以旧换新</li>
                <li>保障服务</li>
                <li>防伪查询</li>
                <li>F码通道</li>
          
            </ul>
            <ul>
                <p>线下门店</p>
                <li>小米之家</li>
                <li>服务网点</li>
                <li>授权体验店/专区</li>
           
            </ul>
            <ul>
                <p>关于小米</p>
                <li>了解小米</li>
                <li>加入小米</li>
                <li>投资者关系</li>
                <li>环境,社会及管治</li>
                <li>廉洁举报</li>
               
            </ul>
            <ul>
                <p>关注我们</p>
                <li>新浪微博</li>
                <li>官方微信</li>
                <li>联系我们</li>
                <li>公益基金会</li>
            
            </ul>

            <div class="lianxi">
                <p>400-100-5678</p>
                <span>8:00-18:00(仅收市话费)</span>
                <button>人工客服</button>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'NavFooter'
}

</script>

<style lang="scss" scoped>
.footer {
    height: 590px;
    background-color: #333333;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .footerA {
        width: 100%;
        height: 70px;
        border-bottom: 1px solid white;
        background-color: #fff;
        display: flex;
        justify-content: center;
        background-color: gainsboro;

        ul {
            display: flex;
            align-items: center;

            li {
                height: 40px;
                line-height: 40px;
                padding: 0px 60px;
                border-right: 1px solid gray;
                color: gray;
                font-size: 15px;
                cursor: pointer;

                &:hover {
                    background-color: #333333;
                    color: white;
                    transition: all 0.8s;
                  
                }

                &:last-of-type {
                    border: none;
                }
            }
        }
    }

    .footerB {
        width: 1300px;
        display: flex;
        justify-content: space-around;

        ul {
            p {
                font-size: 16px;
                color: white;
                margin-bottom: 25px;
            }

            li {
                margin-bottom: 14px;
                cursor: pointer;
                color: white;

                &:hover {
                    color: orange;
                    transition: all 0.3s;
                }
            }
        }

        .lianxi{
            width: 260px;
            height: 100px;
            border-left: 1px solid grey;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;

            span{
                color: white;
            }
         
            p{
                font-size:30px ;
                color: orange;
            }

            button{
                width: 150px;
                height: 37px;
                background-color: transparent;
                color: white;
                border: 1px solid orange;
                margin-top: 10px;
                cursor: pointer;
                &:hover{
                    background-color: orange;
                    color: white;
                    transition: all 0.7s;
                    border: none;
                }
            }
        }
    }


}
</style>
